import React, { Component, createContext, PureComponent } from 'react'

const { Provider, Consumer } = createContext(null)

export default class ParentContext extends Component {
  state = {
    age: '21',
    name: 'glack'
  }
  render() {
    return (
      <div>
        ParentContext
        <input type="text" value={this.state.age} onChange={(e) => this.setState({age: e.target.value})}/>

        <Provider value={this.state}>
          <ChildContext />
        </Provider>
        
      </div>
    )
  }
}

class ChildContext extends Component{
  render(){
    return (
      <div>ChildContext
        <Consumer>{value=>(
          <p>{value.name} 's age is {value.age}</p>
          )}</Consumer>
      </div>
    )
  }
}
